<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>

	<body>
		<div id="app">
			<button @click="width*=1.1">放大10%</button>
			<button @click="width*=0.9">缩小10%</button><br>
			<img :width="width" src="img/t03.jpg" alt=""> <br>
			{{msg}} <br>
			<input v-model="msg" type="text">
			<hr>
			{{a}}是
			<span v-if='a%2 == 0'>偶数</span>
			<span v-else>奇数</span>
			
			{{a%2 == 0?"偶数":"奇数"}}
			<hr>
			姓名：{{student.name}} 年龄：{{student.age}}
			<p>
				{{student.name}}是
				<b v-if="student.age >=18">成年人</b>
				<b v-else>未成年人</b>
				{{student.age >= 18 ? '成年人' : '未成年人'}}
			</p>
		</div>
		<script>
			const app = Vue.createApp({
				data() {
					return {
						width: 200,
						msg: 'hello vue',
						a: 6,
						student: {
							name: "张三",
							age: 16
						}
					}
				}
			}).mount('#app')
		</script>
	</body>

</html>